<script setup lang="ts">
import { defineProps, defineEmits } from 'vue';
import {Select} from "@element-plus/icons-vue";

// 定义接口
interface Option {
  value: string;
  label: string;
}

// 定义 props
withDefaults(defineProps<{
  options: Option[];
  width: number;
  height: number;
}>(),{
  width: 9,
  height: 4
});

// 定义 emit
const emit = defineEmits(['update:modelValue']);

// 处理选中值变化
const handleSelectChange = (event: Event) => {
  const selectedValue = (event.target as HTMLSelectElement).value;
  emit('update:modelValue', selectedValue);
};
</script>

<template>
  <select name="languages" id="lang" :style="{width: width+'vw',height: height+'vh'}" @change="handleSelectChange">
    <option value="" disabled selected>请选择</option>
    <option v-for="option in options" :key="option.value" :value="option.value">
      {{ option.label }}
    </option>
  </select>
</template>

<style scoped>
/* 这里可以添加样式 */
select {
  padding: 8px;
  border: none;
  box-sizing: border-box;
  margin-bottom: 16px;
  background: transparent;
}
select:after{
  margin-right: 5vw;
}
</style>
